<template>
  <div class="tab_box app_background">

    <!--标题栏-->
    <header class="header-top clearfix co-flex">
      <a href="javascript:;" class="back-btn iconfont icon-fanhui co-f05" :class="{'red':isRed}" @click="backDetail()"></a>
      <h3 class="header-title text-center co-f1 position-inherit" v-html="headerTitle"></h3>
      <a class="collect co-f05" :class="{'red':collected}" @click="topCollect()" >
        <i class="start-icon iconfont icon-shoucang"></i>
        <!--<span v-html="collectTitle"></span>-->
        {{collected ? '已收藏':'收藏'}}
      </a>
    </header>
    <!--内容头部-->
    <div id="contentTop" class="content-top m-b-10rem">
      <div class="content-title">
        <h2 class="title-text" v-html="contentTitle"></h2>
        <!--<a class="choose-date" id="chooseDate" @tap="BindTapMaterPicker()">当期-->
          <!--<i class="date-icon iconfont icon-shijian"></i>-->
        <!--</a>-->
      </div>
      <!--折线图-->
      <div class="chart">
        <div id="featureEchart" class="detail-echart" ref="detailEchart" v-if="noDataShow[0]"></div>
        <div class="none-data white-color" v-else="noDataShow[0]">暂无图表数据</div>
      </div>
    </div>
    <div id="" class="main">
      <div class="white-bg-box pad-1rem">
        <div v-if="noDataShow[1]">
          <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed">
            <thead class="color-999999">
            <tr>
              <th width="50%">跌涨幅</th>
              <th width="50%">日期</th>
            </tr>
            </thead>
          </table>
          <div style="height: 12rem" class="overflow-scroll">
            <scroller :on-infinite="infinite"  ref="indexsublist">
              <div class="table-body">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed td-padding">
                  <tbody>
                  <tr v-for="(item,index) in featureData['lineData']">
                    <td width="50%">
                      {{item.avgIncrePercent | percentFilters}}
                    </td>
                    <td width="50%">{{item.times | quarterFilters}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </scroller>
          </div>
        </div>
        <div class="none-data color-gray" v-html="noDataText" v-else="noDataShow[1]"></div>
      </div>
    </div>

    <loading v-show="FangLoading"></loading>
    <fangerror :fangerroring="fangerroring" :fangerrorText="fangerrorText"></fangerror>
    <meun></meun>

  </div>
</template>

<script src="../../../../static/js/detaiFeaturel.js"></script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../../static/css/metro-detail.css"
</style>
